<template>
  <view :style="{ bottom: computedBottom, position: 'fixed', zIndex: 1000 }">
    <ad unit-id="adunit-38cb656b9c525bb4" @load="adLoad" @error="adError" @close="adClose" class="advertisement"></ad>
  </view>
</template>

<script setup>
let interstitialAd = null;
const mapAdvertisement = () => {
  if (wx.createInterstitialAd) {
    interstitialAd = wx.createInterstitialAd({
      adUnitId: 'adunit-38cb656b9c525bb4'
    });
    interstitialAd.onLoad(() => {});
    interstitialAd.onError((err) => {});
    interstitialAd.onClose(() => {});
  }

  if (interstitialAd) {
    interstitialAd.show().catch((err) => {
      console.error(err);
    });
  }
};

// 接受父组件传递的高度参数
const props = defineProps({
  bottomHeight: {
    type: Number,
    default: 0
  }
});

// 计算广告位置
const computedBottom = computed(() => {
  return `calc(${props.bottomHeight}rpx + 5px)`;
});

onShow(() => {
  mapAdvertisement();
});
// 在页面中定义插屏广告
const adLoad = () => {
  console.log('Banner 广告加载成功');
};

const adError = (err) => {
  console.error('Banner 广告加载失败', err);
};

const adClose = () => {
  console.log('Banner 广告关闭');
};
</script>

<style lang="scss">
.advertisement {
  position: fixed;
  z-index: 1000;
}
</style>
